// 获取 html 元素
var html = document.documentElement;
var table = document.getElementsByClassName('gameTable')[0];

// 初始化棋盘，自调
function initialization() {

    // 随机生成四个黑色块，每行一个
    for (var i=0; i<4; i++){
        for (var j=0; j<3; j++){
            table.firstElementChild.firstElementChild.children[i].children[j].style.backgroundColor = '';
        }
        // 三个随机数，这个数决定了每行第几个会变黑
        var num = Math.round(Math.random() * 2);
        var style = table.firstElementChild.firstElementChild.children[i].children[num].style;
        style.backgroundColor = '#333'
    }
}

// 判断按键是否正确
function isTrue(value, index){
    // 若用户按下了 j=1 k=2 l=3 正确返回 true
    return value === 'j' && index === 1 || value === 'k' && index === 2 || value === 'l' && index === 3;
}

// 判断最后一行哪个块为黑
function isBlock(){
    // 检测最后一行中为黑色块的索引位置
    for (var i=0; i<3; i++){
        // 获取 style （有待优化，for循环损耗性能，并且每次都需要查询DOM树）
        var style = table.firstElementChild.firstElementChild.children[3].children[i].style;
        //若其中 backgroundColor 不为 '' 则返回它的索引位置 +1
        if (style.backgroundColor !== ''){
            return i+1;
        }
    }
}

var tbody = table.firstElementChild.firstElementChild;
/**
 * value === true 向下移动
 * 消除最后一行（第4行）
 * 最上方添加一行
 *
 * 涉及到的知识点： 需要用到 DOM 中删除最后一个节点和增加新节点：
 * Element对象用于查找元素： firstElementChild（第一个子元素），lastElementChild（最后一个子元素）
 * Node 对象用于删除增加元素： removeChild()（删除节点），insertBefore()（指定节点之前插入节点）
 *
 * @param value boolean
 */
function move(value){
    if (value === true){
        var firstLine = table.firstElementChild.firstElementChild.children[0];
        var forthLine = table.firstElementChild.firstElementChild.children[3];

        // 删除最后一行
        tbody.removeChild(forthLine);

        // 新建tr节点
        var newTr = document.createElement('tr');
        // 为 tr 新增 td
        var newTd1 = document.createElement('td');
        var newTd2 = document.createElement('td');
        var newTd3 = document.createElement('td');

        // 为新增的 newTr 添加td
        newTr.appendChild(newTd1);
        newTr.appendChild(newTd2);
        newTr.appendChild(newTd3);
33
        // 为 td 随机生成黑块
        var randomNewTd = newTr.children[Math.round(Math.random() * 2)]
        // 设置style
        randomNewTd.style.background = '#333';
        //添加到tbody
        tbody.insertBefore(newTr, firstLine);
    }
}

/**
 * flag 标志，若为true则代表用户没有出错
 * @type {boolean}
 */
var flag = true;
function keypress(event){
    // 若按键正确则进行后序操作
    if (isTrue(event.key, isBlock())){
        move(true);
    }else{
        flag = false;
    }
}
// 用户键盘按下
function userKeyDown(){
    html.addEventListener('keypress', keypress)
}

// 选项卡
var selectModel = document.getElementsByClassName('selectModel')[0];
var gameOver = document.getElementsByClassName('gameOver')[0];
var restart = document.getElementsByClassName('restart')[0];
var easy = document.getElementById('easy');
var time = document.getElementById('time');
var mine = document.getElementById('mine');

// 开始游戏
function startGame(){
    // initialization();
    // 当普通模式被点击游戏开始，否则没用
    easy.addEventListener('click', function (){
        initialization();
        selectModel.style.display = 'none';

        userKeyDown();

        var seconds = document.getElementsByClassName('seconds')[0];
        // 计时器中的秒数
        var num = 0;
        // 一毫秒刷新一次计时器
        var t = setInterval(function () {
            if (!flag){
                html.removeEventListener('keypress',keypress)
                // 显示游戏失败界面
                gameOver.style.display = 'block';
                restart.style.display = 'block';

                // 清除计时器
                clearInterval(t);
            }
            num += 0.01;
            // 显示两位小数
            seconds.textContent = num.toFixed(2)+'秒';
        }, 10);
    });

    // 待开发
    time.addEventListener('click',function (){
        alert('开发中哦....')
    })
    mine.addEventListener('click',function (){
        alert('开发中哦....')
    })
}



restart.addEventListener('click', function (){
    selectModel.style.display = 'block';
    gameOver.style.display = 'none';

    flag = true;
});


window.onload = function (){
    // 开始游戏
    startGame();
}
